import { Col, Row, Spin, Typography } from 'antd';
import React from 'react';
import { WithTranslation, withTranslation } from 'react-i18next';
import { connect } from 'react-redux';

import sideImage3 from '../../assets/images/sider_2019_02-04-2.png';
import sideImage2 from '../../assets/images/sider_2019_02-04.png';
import sideImage from '../../assets/images/sider_2019_12-09.png';
import { Carousel } from '../../components/carousel';
import { ProductCollection } from '../../components/product-collection';
import { SideMenu } from '../../components/side-menu';
import { MainLayout } from '../../layouts/main-layout/main-layout';
import { giveMeDataActionCreator } from '../../redux/recommend-products/recommend-products-actions';
import { RootState } from '../../redux/store';

const mapStateToProps = (state: RootState) => {
  return {
    loading: state.recommendProducts.loading,
    error: state.recommendProducts.error,
    productList: state.recommendProducts.productList
  };
};

const mapDispatchToProps = (dispatch) => {
  return {
    giveMeData: () => {
      dispatch(giveMeDataActionCreator());
    }
  };
};
type PropsType = WithTranslation &
  ReturnType<typeof mapStateToProps> &
  ReturnType<typeof mapDispatchToProps>;
class HomePageComponent extends React.Component<PropsType> {
  componentDidMount() {
    this.props.giveMeData();
  }
  render() {
    const { t, productList, loading, error } = this.props;
    if (loading) {
      return (
        <Spin
          size="large"
          style={{
            marginTop: 200,
            marginBottom: 200,
            marginLeft: 'auto',
            marginRight: 'auto',
            width: '100%'
          }}
        />
      );
    }
    if (error) {
      return <div>网站出错啦，{error}</div>;
    }
    return (
      <>
        <MainLayout>
          <Row>
            <Col span={6}>
              <SideMenu />
            </Col>
            <Col span={18}>
              <Carousel />
            </Col>
          </Row>
          <ProductCollection
            title={
              <Typography.Title level={3} type="warning">
                {t('home_page.hot_recommended')}
              </Typography.Title>
            }
            sideImage={sideImage}
            products={productList[0].touristRoutes}
          ></ProductCollection>
          <ProductCollection
            title={
              <Typography.Title level={3} type="warning">
                {t('home_page.new_arrival')}
              </Typography.Title>
            }
            sideImage={sideImage2}
            products={productList[1].touristRoutes}
          ></ProductCollection>
          <ProductCollection
            title={
              <Typography.Title level={3} type="warning">
                {t('home_page.domestic_travel')}
              </Typography.Title>
            }
            sideImage={sideImage3}
            products={productList[2].touristRoutes}
          ></ProductCollection>
        </MainLayout>
      </>
    );
  }
}

export const HomePage = connect(
  mapStateToProps,
  mapDispatchToProps
)(withTranslation()(HomePageComponent));
